import React, { Component } from "react";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import "./index.scss";
import yhTools from "../../../../tools/yh";
import xhdConfig from "../../../../config/XHDConfig";
import { Toast } from "antd-mobile";
import LoanItem from "./loanItem";
import PayItem from "./payItem";
import loanNull from "../../../../images/loan-null.png";

const saveDataMap = {
	loan: "loanList",
	pay: "payList"
};
class RecordList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			type: "pay",
			loanList: [],
			payList: []
		};
	}
	componentDidMount() {
		this.getList(this.state.type);
	}
	getList = type => {
		console.log(`type ${type}`);
		const url = type === "loan" ? "xhdRecordLoanList" : "xhdRecordPayList";
		const params = {
			url: xhdConfig[url],
			params: {},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				this.setState({
					[saveDataMap[type]]: res.data
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	checkDetail = item => {
		const { cino } = item;
		this.props.history.push(`/xhdRecordDetail/${cino}`);
	};
	seeLoanHome() {
		this.props.history.push("/xhdHome");
	}
	render() {
		const { loanList, payList, type } = this.state;
		const _pageParams = {
			header: {
				title: "还款记录"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="xhd-record-container">
					<div className="list bg-white">
						{type === "loan" &&
							loanList.map((item, key) => (
								<LoanItem
									item={item}
									key={key}
									onClick={() => this.checkDetail(item)}
								/>
							))}
						{type === "pay" &&
							payList.map((item, key) => <PayItem item={item} key={key} />)}
					</div>
					{type === "loan" && !loanList.length ? (
						<div className="loan-text">
							<div className="loan-text-content">
								{" "}
								<img src={loanNull} />
							</div>
							您还没有借还款信息，去试试
							<span onClick={this.seeLoanHome.bind(this)}>查看借款额度</span>
							吧！
						</div>
					) : (
						""
					)}
				</div>
			</MainLayout>
		);
	}
}

export default RecordList;
